<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>购物车</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link type="text/css" rel="stylesheet" href="<%=path%>/resources/css/shopstyle.css">
<style type="text/css">
#list {
    width:500px;
    border:2px solid #eee;
}
#list li{
    list-style-type:none;
     float:left;
    width:100px;
    text-align:center;
    background:#ccc;
    margin-right:2px;
    margin-bottom:2px;
    line-height:30px;
    font-size:14px;
}
#list li.bt{font-size:16px; font-weight:bold; background:#999;}

</style>
<script type="text/javascript" src="<%=path%>/resources/scripts/html5.js"></script>
<script type="text/javascript" src="<%=path%>/resources/scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/scripts/jsondata.js"></script>
<script type="text/javascript">
	function updateNumber(id){
		var number = $('#' + id).val();
		var price = $('#' + id).parent().prev().text();
		// 获取小计
		var lastPrice = $('#' + id).parent().next().text();
		var sum = eval(number * price).toFixed(2);
		$('#' + id).parent().next().text(sum);
		var allSum = $('#sumPrice').text();
		allSum = eval(parseFloat(allSum) + parseFloat(sum) - parseFloat(lastPrice));
		$('#sumPrice').text(allSum);
	}
</script>
</head>
<body>
<div class="pw">
	<header class="body_header">
		<div class="top">
			<!-- <div class="logo"><img src="<%=path%>/resources/image/logo.png"></div>
			<div class="menu">

			</div> -->
		</div>
	</header>
	<section class="body_banner">
		
		<div class="swipe">
			<ul id="slider">
				<li style="display:block"><img width="100%" src="<%=path%>/resources/image/banner1.jpg"/></li>
				<li><img width="100%" src="<%=path%>/resources/image/banner2.jpg"/></li>
				<li><img width="100%" src="<%=path%>/resources/image/banner3.jpg"/></li>
				<li><img width="100%" src="<%=path%>/resources/image/banner4.jpg"/></li>
			</ul>
			<div id="pagenavi">
				<a href="javascript:void(0);" class="active">1</a>
				<a href="javascript:void(0);">2</a>
				<a href="javascript:void(0);">3</a>
				<a href="javascript:void(0);">4</a>
			</div>
		</div>
		<script type="text/javascript" src="<%=path%>/resources/scripts/touchScroll.js"></script>
		<script type="text/javascript" src="<%=path%>/resources/scripts/touchslider.dev.js"></script>
		<script type="text/javascript" src="<%=path%>/resources/scripts/run.js"></script>
		
	</section>
	<section class="body_main">
		<div class="trip" id="nav">
			<ul class="nav">
				<li><a href="list.html"><img src="<%=path%>/resources/image/nov01.png"><br>首页</a></li>
				<li><a href="about.html"><img src="<%=path%>/resources/image/nov02.png"><br>团购打折</a></li>
				<li><a href="<%=path%>/shopcart/showShopCartInfo"><img src="<%=path%>/resources/image/nov03.png"><br>查看购物车</a></li>
				<li><a href="cont.html"><img src="<%=path%>/resources/image/nov04.png"><br>联系我们</a></li>
			</ul>
		</div>
		<div style="margin-left: 20%;margin-right:20%">
			<div><h3 class="fl">购买到的产品</h3></div>
			<div>
				<table width="100%" border="0">
				<c:choose>
            	<c:when test="${empty shopCartList}">
            	<tr style="width:100%;">
            		<span style="text-algin:center;font-size:30px;color:red;">购物车内没有商品!</span>
            	</tr>
            	</c:when>
            	<c:otherwise>
            	<tr>
                <!-- <td width="10%"><input type="checkbox" class="checkbox"  name="check_all" id="check_all" ></td> -->
                <td width="40%">商品</td>
                <td width="20%">单价(元)</td>
                <td width="10%">数量</td>
                <td width="10%">小计</td>
                <td width="10%">操作</td>
            	</tr>
            	<c:forEach items="${shopCartList}" var="shopCartInfo" varStatus="status">
	            		<tr>
	            		<!-- <td><input type="checkbox"/></td> -->
	            		<td><!-- <img src="<%=path%>/${shopCartInfo.imageUrl}"/> --><span>${shopCartInfo.name}</span></td>
	            		<td>${shopCartInfo.price}</td>
	            		<td><input type="text" value="${shopCartInfo.number}" style="width:30px;text-align:center;" id="${status.index}" onchange="updateNumber(this.id);"></td>
	            		<c:set var="sum" value="${sum + shopCartInfo.price * shopCartInfo.number}"></c:set>
	            		<td>${shopCartInfo.price * shopCartInfo.number}</td>
	            		<td><a href="<%=path%>/shopcart/delShopCart?customerId=${shopCartInfo.customerId}&productId=${shopCartInfo.productId}">删除</a></td>
	            		</tr>
            	</c:forEach>
            	</c:otherwise>
            	</c:choose>
            	<tr style="width:100%;">
            	<td style="margin-left: 80%"></td>
            	</tr>
        		</table>
        		<hr style="border:1px dashed #000; height:0.5px">
        		<div style="width:100%;margin-left:70%;">
        			合计：<span id="sumPrice">${sum}</span>元</br>
        			<input type="button" value="提交订单"/>
        		</div>
			</div>
		</div>
	</section>
	<!--<div class="body_footer">
		<ul>
			<li>
				<a href="index.html">
					<dl>
						<dt><img alt="è¿åé¦é¡µ" src="images/icon_1.png"></dt>
						<dd>è¿åé¦é¡µ</dd>
					</dl>
				</a>
			</li>
			<li>
				<a title="æçµè¯" href="tel_3A//4006771971">
					<dl>
						<dt><img alt="æçµè¯" src="images/icon_4.png"></dt>
						<dd>æçµè¯</dd>
					</dl>
				</a>
			</li>
			<li>
				<a title="åç­ä¿¡" href="messages.html">
					<dl>
						<dt><img alt="åç­ä¿¡" src="images/icon_5.png"></dt>
						<dd>åç­ä¿¡</dd>
					</dl>
				</a>
			</li>					
			<li>
				<a href="../../../../map.baidu.com/mobile/#place/list/qt=s&wd=åå®å¸æ°æå¤§éé³å100åå¸å¹¿åºT2-13æ¥¼&vt=map/vt=map&i=8">
					<dl>
						<dt><img alt="å°å¾" src="images/icon_3.png"></dt>
						<dd>å°å¾</dd>
					</dl>
				</a>
			</li>
		</ul> 
	</div> -->
</div>
</body>
</html>
